<template>
  <div v-if="vipDetail">
    <!-- 更换卡 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="更换卡类型"
      width="750px"
      @close="close"
    >
      <div v-loading="dialogLoading" class="dialog-edit-type" element-loading-text="更换中">
        <ul class="info-avatar">
          <li class="avatar">
            <img v-if="vipDetail.customer.headImg" :src="vipDetail.customer.headImg" alt>
          </li>
          <li class="name">
            {{
              vipDetail.member.name
                ? vipDetail.member.name
                : vipDetail.customer.nickName
            }}
          </li>
        </ul>
        <div class="form">
          <el-form label-width="130px" size="small">
            <el-form-item label="当前会员卡类型：">{{ vipDetail.categoryName }}</el-form-item>
            <el-form-item label="更换后卡类型：">
              <el-radio-group v-model="cardIndex">
                <el-radio
                  v-for="(item, index) in cardList"
                  v-show="vipDetail.member.memberCategoryId !== item.id"
                  :key="item.id"
                  :label="index"
                  :disabled="!item.status"
                  border
                >
                  {{
                    item.status
                      ? item.categoryName
                      : item.categoryName + "(已停用)"
                  }}
                </el-radio>
              </el-radio-group>
              <div>
                <el-checkbox v-model="award">赠送开卡奖励</el-checkbox>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button
          :disabled="dialogLoading"
          size="small"
          round
          type="primary"
          @click="handleSubmit"
        >保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { changeVipCardType, getAllVipCardList } from '@/api/vip'
export default {
  props: {
    vipDetail: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      dialogLoading: false,
      // 数据
      cardList: null, // 卡列表
      cardIndex: null, // 当前选中的索引
      award: false
    }
  },
  mounted() {},
  methods: {
    /**
       *  获取数据
       */
    // 获取会员卡列表
    getCardList() {
      getAllVipCardList().then(res => {
        this.cardList = res.data
        this.cardList.forEach((item, index) => {
          if (item.id === this.vipDetail.member.memberCategoryId) {
            this.cardIndex = index
          }
        })
      })
    },

    open() {
      this.cardIndex = null
      this.award = false
      this.show()
      this.getCardList()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.dialogLoading = false
    },

    hide() {
      this.dialogVisible = false
    },

    /**
       *  按钮组
       */
    // 提交更换卡
    handleSubmit() {
      const _this = this
      if (
        this.cardList[this.cardIndex].id ===
          this.vipDetail.member.memberCategoryId
      ) {
        this.hide()
      } else {
        this.$confirm(
          `您确定要把会员${this.vipDetail.member.name}的卡类型更改为【${
            this.cardList[this.cardIndex].categoryName
          }】, 是否继续?`,
          '温馨提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            roundButton: true
          }
        )
          .then(() => {
            this.dialogLoading = true
            const params = {}
            params.memberId = _this.vipDetail.member.id
            params.categoryId = _this.cardList[_this.cardIndex].id
            params.award = _this.award
            changeVipCardType(params)
              .then(res => {
                // _this.vipDetail.member.memberCategoryId =
                //   _this.cardList[_this.cardIndex].id;
                // _this.vipDetail.categoryName =
                //   _this.cardList[_this.cardIndex].categoryName;
                _this.$notify({
                  title: '成功',
                  message: '会员卡类型已变更成功',
                  type: 'success',
                  duration: 2000,
                  offset: 40
                })
                _this.resolve && this.resolve()
                _this.hide()
              })
              .finally(() => {
                this.dialogLoading = false
              })
          })
          .catch(err => {})
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 更换卡弹框 */
  .dialog-edit-type {
    .info-avatar {
      height: 40px;
      margin: 15px 0;
      li {
        float: left;
        margin-right: 10px;
      }
      .avatar {
        overflow: hidden;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #e7e7e7;
      }
      .name {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        color: $dark-font-color;
      }
    }
    .form {
      margin-left: 40px;
      .el-radio + .el-radio {
        margin-left: 0;
      }
      .el-radio {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
</style>
